<template>
  <div class="register">
    <div class="register-form">
      <div class="register-logo-wrap">
        <div class="register-logo">注册</div>
      </div>
      <div class="form">
        <div class="register-form-wrap">
          <div class="field-item">
            <van-field v-model="form.phone" clearable placeholder="请输入手机" />
          </div>
          <div class="field-item flex">
            <div class="field-item-wrap">
              <van-field v-model="form.authCode" clearable type="number" placeholder="请输入验证码"></van-field>
            </div>
            <div class="field-form-sms">
              <div slot="button" class="register-form-sms" @click="sendCode">{{ timer.text }}</div>
            </div>
          </div>
          <div class="field-item">
            <van-field v-model="form.pwd" clearable type="password" placeholder="密码为6-20位，包含数字和字母" />
          </div>
          <div class="field-item">
            <van-field v-model="form.pwd2" clearable type="password" placeholder="确认您的登录密码" />
          </div>
          <div class="field-item">
            <van-field v-model="form.pwdtow" clearable type="password" placeholder="交易密码为6-20位" />
          </div>
          <div class="field-item">
            <van-field v-model="form.pwdtow2" clearable type="password" placeholder="确认您的交易密码" />
          </div>
        </div>
        <div class="register-btn">
          <van-button class="register-btn-reset" type="info" size="large" :loading="loading" @click="onSubmit">注册</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as reg from "../assets/reg.js";
import { register, getAuthCode } from "../../api/interface";
export default {
  name: "Home",
  data() {
    return {
      url: "http://www.smscvip.com/api",
      loading: false,
      onSMS: false,
      form: {
        phone: "",
        authCode: "",
        pwd: "",
        pwd2: "",
        pwdtow: "",
        pwdtow2: ""
      },
      timer: {
        func: "",
        count: "",
        text: "获取验证码"
      } // 倒计时
    };
  },
  watch: {},
  created() {},
  methods: {
    setTimer(db_SMS) {
      if (db_SMS <= 0) return;
      localStorage.setItem("db_SMS", db_SMS || 59);
      this.timer.func = setInterval(() => {
        this.timer.count = Number(localStorage.getItem("db_SMS"));
        this.timer.count--;
        localStorage.setItem("db_SMS", this.timer.count);
        this.timer.text = this.timer.count + "s";
        if (this.timer.count <= 0) {
          this.timer.text = "获取验证码";
          this.onSMS = false;
          localStorage.setItem("db_SMS", 0);
          clearInterval(this.timer.func);
        }
      }, 1000);
    },
    sendCode() {
      if (this.timer.count > 0) return;
      // 获取短信
      const regPhone = reg.regPhone(this.form.phone);
      if (regPhone) {
        this.$toast(regPhone);
        return;
      }
      if (this.onSMS) return;
      getAuthCode({ phone: this.form.phone })
        .then(res => {
          this.$toast("发送成功");
          this.setTimer(59);
        })
        .catch(() => {
          this.onSMS = false;
        });
    },
    onSubmit() {
      if (this.loading) return;
      const regSubmit = reg.regSubmit(this.form);
      if (regSubmit) {
        this.$toast(regSubmit);
        return;
      }
      this.loading = true;
      register(this.form)
        .then(res => {
          this.loading = false;
          this.$toast("注册成功");
          setTimeout(() => {
            this.$router.push({ path: "/login" });
          }, 500);
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped>
img {
  width: 100%;
}
.register {
  min-height: 100vh;
  background-image: linear-gradient(160deg, rgb(0, 147, 233) 0%, rgb(114, 218, 255) 100%);
  &-logo-wrap {
    padding: 0.4rem;
  }
  &-logo {
    margin: auto;
    color: #fff;
    font-size: 0.4rem;
    text-align: center;
  }
  &-title {
    padding: 0 0.1rem;
    font-size: 0.4rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
  }
  .field-item {
    margin-bottom: 0.1rem;
    &.flex {
      display: flex;
      align-items: center;
    }
    &-title {
      padding-left: 0.15rem;
      margin-bottom: 0.1rem;
      font-size: 0.16rem;
      color: #1e1e1e;
    }
    .van-cell {
        padding: .1rem 15px;
        background-color: rgba(132, 204, 249, .6)!important;
    }
  }
  .field-item-wrap {
    flex: 1;
  }
  .field-form-sms {
    width: 1.2rem;
    height: calc(24px + .2rem);
    line-height: calc(24px + .2rem);
    text-align: center;
    margin-left: 0.05rem;
    font-size: 14px;
    color: #fff;
    background-color: rgba(132, 204, 249, .6);
  }
  .download {
    margin: 0.2rem 0;
    font-size: 0.16rem;
    color: #96c3f6;
  }
}
.register {
  &-form {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    padding-bottom: 0.1rem;
  }
  &-btn {
    &-reset {
      display: block;
      width: 100%;
      height: calc(24px + .2rem);
      line-height: calc(24px + .2rem);
      margin-top: calc(24px + .2rem);
      font-size: .16rem;
      text-align: center;
      color: #fff;
      border: 0 !important;
      background-color: #1399ea;
      border-radius: 0.05rem !important;
      box-shadow: 0 0.02rem 0.06rem #5ac7f9;
    }
  }
}
.activeSMS {
  color: #e1e1e1;
}
.van-field__control {color: #fff!important}
</style>
